<script lang="ts" setup>
import { reactive } from 'vue'
// import FHeader from './components/FHeader.vue'
// import HelloWorld from './components/HelloWorld.vue'


const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

import { ref } from 'vue'
const input = ref('')


const tableData = [
  {
    tableData_key: '1_Cur_rent',
    tableData_value: '133.5',
  },
  {
    tableData_key: '1_Equipment_No',
    tableData_value: 'robot1',
  },
  {
    tableData_key: '1_ing_Speed',
    tableData_value: '0.009999999776482582',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: '240',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: '1',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: '81',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: '837',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: '16.005001068115234',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },
  {
    tableData_key: '2016-05-03',
    tableData_value: 'Tom',
  },

]

const textarea = ref('')




</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>

        <div class="f-header">

          <span class="logo">

            <img src="./assets/logo.png" alt="logo" style="margin-left: 5px;height: 55px;">

          </span>
          <span style="font-size: large;">
            MES REWORK
          </span>

          <div class="ml-auto flex items-center" style="margin-right: 30px;">
            <span class="flex items-center text-light-50" style="font-size: large;">
              User
            </span>
            <span class="flex items-center text-light-50 exit" style="font-size: large;">
              <img src="./assets/exit.png" alt="logo" style="margin-left: 5px;height: 25px;">
              Exit
            </span>
          </div>

        </div>

      </el-header>
      <el-main style="width: 100%;margin-top: 5px;padding: 0;">
        <el-row>
          <el-col :span="3">
            <div style="background-color:white;">
              <el-row class="tac" style="height: 880px;">
                <el-col :span="24">
                  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-sub-menu index="1">
                      <template #title>
                        <img src="./assets/Search.png" alt="logo" style="margin-left: 5px;height: 20px;">
                        <span style="margin-left: 9px;font-weight:bold;font-size: large;">Query</span>
                      </template>

                      <el-menu-item index="1-1"><el-button type="success"
                          class="station_btn">OP155-1</el-button></el-menu-item>
                      <el-menu-item index="1-2"><el-button type="success"
                          class="station_btn">OP155-2</el-button></el-menu-item>
                      <el-menu-item index="1-3"><el-button type="success"
                          class="station_btn">OP160-1A</el-button></el-menu-item>
                      <el-menu-item index="1-4"><el-button type="success"
                          class="station_btn">OP160-1B</el-button></el-menu-item>
                      <el-menu-item index="1-5"><el-button type="success"
                          class="station_btn">OP160-2A</el-button></el-menu-item>
                      <el-menu-item index="1-6"><el-button type="success"
                          class="station_btn">OP160-2B</el-button></el-menu-item>
                      <el-menu-item index="1-7"><el-button type="success"
                          class="station_btn">OP162-1A</el-button></el-menu-item>
                      <el-menu-item index="1-8"><el-button type="success"
                          class="station_btn">OP162-1B</el-button></el-menu-item>
                      <el-menu-item index="1-9"><el-button type="success"
                          class="station_btn">OP162-2A</el-button></el-menu-item>
                      <el-menu-item index="1-10"><el-button type="success"
                          class="station_btn">OP162-2B</el-button></el-menu-item>
                      <el-menu-item index="1-11"><el-button type="success"
                          class="station_btn">OP167-1</el-button></el-menu-item>
                      <el-menu-item index="1-12"><el-button type="success"
                          class="station_btn">OP167-2</el-button></el-menu-item>
                    </el-sub-menu>

                  </el-menu>
                </el-col>

              </el-row>
            </div>



          </el-col>
          <el-col :span="21">
            <el-row :gutter="10" style="background-color: #EDEDED;margin-left: 10px;height: 80px;">
              <el-col :span="3">
                <div class="grid-content ep-bg-purple" style="background-color:chocolate">
                  <el-button type="success" class="search_btn" style="font-size: 20px;"><span
                      style="color: black;">Search</span></el-button>
                </div>
              </el-col>
              <el-col :span="18" style="margin-left: 0px;">
                <div class="grid-content ep-bg-purple"
                  style="background-color:white;display: flex;align-items: center;justify-content: left;height: 70px;">
                  <el-input style="width: 650px;margin-left: 5px;" placeholder="Product ID" />
                  <el-input style="width: 350px;margin-left: 20px;" placeholder="time" />
                </div>
              </el-col>
              <!-- <el-col :span="8">
                <div class="grid-content ep-bg-purple" style="background-color:white;display: flex;align-items: center;justify-content: center;height: 80px;">
                  <el-input style="width: 350px;" placeholder="time" />
                </div>
              </el-col> -->
              <el-col :span="3">
                <div class="grid-content ep-bg-purple" style="background-color:chocolate;">
                  <el-button type="success" class="clear_options_btn" style="font-size: 20px;"><span
                      style="color: black;">Clear
                      options</span></el-button>
                </div>
              </el-col>
            </el-row>

            <el-container style="margin-top: -30px;padding-top: 5px;height: 800px;">
              <el-aside width="65%" style="background-color: aquamarine;">
                <el-container>
                  <el-header class="four_btn_area"
                    style="display: flex;align-items: center;justify-content: space-between;height: 70px;">
                    <el-button type="danger" class="four_btn_area_btn">OP155-1</el-button>
                    <el-button type="success" class="four_btn_area_btn">OP160-2A</el-button>
                    <el-button type="success" class="four_btn_area_btn">OP160-2A</el-button>
                    <el-button type="success" class="four_btn_area_btn">OP167-1</el-button>
                  </el-header>
                  <el-main>
                    <el-container style="margin-top: 0px;padding-top: 0px;">
                      <el-header style="height: 400px;width: 1000px;margin-top: -10px;padding-top: 0px;">
                        <img src="./assets/station_images/a.png" alt="logo"
                          style="margin-left: 0px;width: 1000px;height: 400px;">
                      </el-header>
                      <el-main>
                        <el-container>
                          <el-header style="display: flex;margin: 0px; padding: 0px;height: 45px;">
                            <el-button type="danger" style="margin-left: 9px;font-size: large;height: 40px;">
                              <span style="color: black;">Point NG</span>
                            </el-button>
                            <el-button type="success" style="margin-left: 9px;font-size: large;height: 40px;">
                              <span style="color: black;">Repair</span>
                            </el-button>

                          </el-header>
                          <el-main style="height: 150px;margin: 0;padding-bottom: 0px;background-color: white;">
                            <div style="display: flex;align-items: top;padding-top: 0px;" class="point_ng_area">
                              <div class="point_ng_left" style="width: 150px;height: 140px;">
                                <input type="text" style="height: 30px;width: 120px;" placeholder="Number">
                              </div>
                              <div class="point_ng_center" style="gap:10px;width: 100px;">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="09">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="Robot Number">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="Force">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="Stroke">
                              </div>
                              <div class="point_ng_right" style="width: 150px;margin-left: 15px;">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;display:none"
                                  placeholder="09">
                                <input type="text" style="height: 30px;width: 120px;margin-top: 35px;margin-bottom: 5px;"
                                  placeholder="Robot3">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="16.99542236328">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="2.359999895095825">
                              </div>
                            </div>
                            <div style="display: flex;align-items: top;" class="point_ng_area">
                              <div class="point_ng_left" style="width: 150px;height: 140px;">
                                <input type="text" style="height: 30px;width: 120px;" placeholder="Number">
                              </div>
                              <div class="point_ng_center" style="gap:10px;width: 100px;background-color:aqua;">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="09">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="Robot Number">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="Force">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="Stroke">
                              </div>
                              <div class="point_ng_right" style="width: 150px;margin-left: 15px;">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;display:none"
                                  placeholder="09">
                                <input type="text" style="height: 30px;width: 120px;margin-top: 35px;margin-bottom: 5px;"
                                  placeholder="Robot3">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="16.99542236328">
                                <input type="text" style="height: 30px;width: 120px;margin-bottom: 5px;"
                                  placeholder="2.359999895095825">
                              </div>
                            </div>

                          </el-main>
                        </el-container>
                      </el-main>
                    </el-container>


                  </el-main>
                  <el-footer
                    style="display: flex;align-items: center;background-color:bisque;margin-left: 0px;margin-bottom: 0px;padding-bottom: 0px;padding-left: 0px;">
                    <el-input v-model="textarea" style="width: 950px" placeholder="Not:" show-word-limit
                      type="textarea" />

                    <el-button type="success" class="confirm_data_btn">
                      <span style="color: #000;">
                        Confirm data
                      </span>

                    </el-button>
                  </el-footer>
                </el-container>

              </el-aside>
              <el-main
                style="height: auto;background-color: burlywood;padding-left: 2px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;">

                <el-container>
                  <el-header
                    style="background-color: white;margin-left: 0;padding-left: 0;display: flex;align-items: center;">
                    <el-button type="success" style="margin-left: 9px;font-size: large;height: 40px;">
                      <span style="color: black;">Detail value</span>
                    </el-button>
                  </el-header>
                  <el-main style="background-color:white;height: 720px;padding-left: 0px;">

                    <el-table :data="tableData" style="width: 100%;height: 680px;" :border="true">
                      <el-table-column prop="tableData_key" label="key" />
                      <el-table-column prop="tableData_value" label="value" />
                      <!-- <el-table-column prop="address" label="Address" /> -->
                    </el-table>

                  </el-main>
                </el-container>
              </el-main>
            </el-container>
          </el-col>
        </el-row>


      </el-main>
    </el-container>
  </div>
</template>



<style>
#app {
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

body {
  min-height: auto;

}

.head {

  background-color: red;
}

.main {
  background-color: blue;

}

.f-header {
  @apply flex items-center bg-sky-700 text-light-50 fixed top-0 left-0 right-0;
  height: 64px;
}

.logo {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

.exit {
  width: 90px;
  height: 45px;
  margin-left: 10px;
  @apply bg-sky-900;
}

.station_btn {

  height: 50px;
  margin-top: 10px;
  margin-left: -30px;
  background-color: #718022ad;
}

.el-menu-item {
  margin-top: 10px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.search_btn {
  height: 70px;
  width: 100%;
  margin-left: 0;

}

.clear_options_btn {
  height: 70px;
  width: 100%;
  margin-left: 0;

}

.four_btn_area_btn {
  width: 160px;
  height: 60px;
}

.confirm_data_btn {
  width: 160px;
  height: 60px;
  margin-left: 20px;

  @apply bg-sky-700;
}

.point_ng_area input{
  border-radius: 5px;
  border-color: #272424;
  border: 2px solid;
}
</style>